﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="EditDatabase.aspx.cs" Inherits="EditDatabase" %>

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContent" Runat="Server">
        <div class="contentfull">
        <div class="breadcrumbs">
            <ul id="crumbs">
                <li><a title="My Account" href="/account/">My Account</a>
                    <img src="Content/Images/separator.png" alt="&rarr;" class="separator">
                    Rosters 
                </li>
            </ul>
        </div>
        <div id="showMessages"></div>
        <div class="top">
               <div class="innerleft">
	<h1>
		<img src="/images/icons/database-icon.png" alt="Database" height="32px" width="32px"> 
		<span id="databaseName">Rosters 2</span>
		<form id="renameform">
				<input name="action" value="renamedb" type="hidden">
				<input name="listid" value="203845" type="hidden">
				<input class="inputed" id="dbname" name="dbname" value="Database 2" type="text">
				<input id="rename-button" value="Rename" type="submit">
			</form>
			<a id="rename1" title="Click to rename">Rename</a>
	</h1>
	<span class="db_value">
		0  Values	</span>
	<script type="text/javascript">
	    $(document).ready(function () {
	        var messengerDiv = $("div#showMessages");
	        $("#rename1").click(function (event) {
	            $('#databaseName').hide();
	            $("#rename1").hide();
	            $("#renameform").show().css("display", "inline");
	            return false;
	        });

	        $("#dbname").click(function (event) {
	            return false;
	        });

	        $("#renameform").submit(function (event) {
	            $.ajax({
	                type: "POST",
	                data: $(this).serialize(),
	                success: function (msg) {
	                    if (msg != 'SSICADatabaseRenamingError') {
	                        $("#renameform").hide();
	                        $("#databaseName").fadeIn().html(msg);
	                        $("#dbname").val(msg);
	                        messengerDiv.removeClass().addClass("success");
	                        var showMessage = 'Database has been renamed.';
	                        if (messengerDiv.is(":empty")) {
	                            messengerDiv.empty().append("<p></p>").append("<li>" + showMessage + "</li>").hide().slideDown();
	                        } else {
	                            messengerDiv.hide().empty().append("<p></p>").append("<li>" + showMessage + "</li>").fadeIn();
	                        }
	                    } else {
	                        messengerDiv.removeClass().addClass("warning");
	                        var showMessage = 'Database could not be renamed. Certain special characters are not allowed.';
	                        if (messengerDiv.is(":empty")) {
	                            messengerDiv.empty().append("<p></p>").append("<li>" + showMessage + "</li>").hide().slideDown();
	                        } else {
	                            messengerDiv.hide().empty().append("<p></p>").append("<li>" + showMessage + "</li>").fadeIn();
	                        }
	                    }

	                }
	            });
	            return false;
	        });

	        $("body").not("#renameform").click(function (event) {
	            if ($("#renameform").is(':visible')) {
	                $("#renameform").fadeOut();
	                $("#databaseName").delay(400).fadeIn();
	                $("#rename1").delay(400).fadeIn();
	            }
	        });

	    });
	</script>
</div>
        </div>
        <div class="content">
            






 	<div class="tabs_box">
	<ul id="tabs"> <li><a class="tabs_off" href="/account/databases/203845/search/">Search</a></li><li><a class="tabs_on" href="/account/databases/203845/">Add</a></li><li><a class="tabs_off" href="/account/databases/203845/manage/">Import</a></li><li><a class="tabs_off" href="/account/databases/203845/export/">Export</a></li><li><a class="tabs_off" href="/account/databases/203845/autofill/">Autofill</a></li><li><a class="tabs_off" href="/account/databases/203845/clear/">Clear</a></li>	</ul>
</div> 
	<div>
	<fieldset style="clear:both; ">
			
 		<h2>Add a Barcode Value</h2>
 
 		<form method="post" id="addValues">
 			<input name="action" value="addvalue" type="hidden">
 			<input name="listid" value="203845" type="hidden">
			<div class="value">
			<label for="barcodevalue">Value</label>
				<input class="largeinput" id="barcodevalue" maxlength="100" name="value" autocomplete="off" type="text">
			<label>Validity</label>
 			<div class="radioset left full">
 				<input name="validity" id="validBarcode" value="1" class="edit_invalid" checked="" type="radio">
 				<label for="validBarcode"><img src="/images/icons/valid-small.png">&nbsp;&nbsp;Valid</label>
 				<input name="validity" id="invalidBarcode" value="0" class="edit_invalid" type="radio">
 				<label for="invalidBarcode"><img src="/images/icons/invalid-small.png">&nbsp;&nbsp;Invalid</label>
 			</div>
			</div>
			<div class="response">
			<label for="customresponse">Response</label>
				<textarea name="response" id="customresponse" rows="20" cols="5" class="full" placeholder="Optional. Appears with scan results."></textarea>
				<input value="Add" class="black_button blarge right" type="submit">
 				<div id="LoadingDiv"><img src="/images/ajax-loader.gif"></div>
			</div>
 		</form>
 		 
	</fieldset>
	</div>

	<span id="editBarcodeFormHidden">
		<form class="editBarcodeForm">

			<input name="action" value="editvalue" type="hidden">
			<input name="value" id="value" type="hidden">
				<textarea name="response" rows="5" cols="5" class="edit_response"></textarea><br>
				<input name="invalidity" class="edit_invalid" id="input_invalid" type="checkbox">
					<label for="input_invalid" id="label_for_input_invalid" title="Invalid"><img src="/images/icons/invalid-small.png" alt="">&nbsp;&nbsp;Force an Invalid Response</label>
			<input class="yellow_button ysmall" style="font-size: 1.25em; margin-left: 5%;" value="Save" type="submit">
			<input class="cancel_edit" style="font-size: 1.25em; margin-left: 5%;" value="Cancel" type="button">
		</form>
	</span>
	<ul class="data" id="datavaluesTable">
		<li id="hidden_placeholder" class="group valuerow">
			<p class="data_action">
				<a class="editDatabaseValue a1" href="#">Edit</a> 
				<a class="deleteDatabaseValue" href="#">Delete</a> </p>
			<form method="post" class="data_form">
					<input name="action" value="generatebarcode" type="hidden">
					<input name="value" type="hidden">
					<input value="Barcode" class="data_button" type="submit">
				</form>
				<img src="/images/icons/valid.png" title="Valid" alt="Valid" class="dataicon">
				<h1></h1>
				<h2>
					<input name="value" type="hidden">
					<input name="status" type="hidden">
					<input name="response" type="hidden">
					<ul id="barcode_response_area">
						<li></li>
						<li><a class="editDatabaseValue a2" href="#" id="barcode_response"></a></li>
					</ul>
				</h2>
		</li> 	</ul>
		<ul id="emptyDatabasePlaceholder" class="data">
			<li>
				<h1>No values have been found in this database.</h1>
				<h2>Add barcode values or import a CSV file to start validating scans and generating barcodes.</h2>
			</li>
		</ul> 	
        </div><!--Content-->
        <script type="text/javascript">

                $(document).ready(function () {


                    var messengerDiv = $("div#showMessages");

                    // quick adding values to the database
                    $("#addValues").submit(function (event) {

                        var form = $(this);
                        var value = form.find("input:text[name=value]").val();
                        if (value == "") return false;
                        var submitbutton = form.find("input:submit");
                        var barcode_response = form.find("textarea[name=response]").val();

                        //barcode_response = $.trim(barcode_response);
                        var barcode_status = $("#validBarcode").is(":checked");
                        var barcode_status_image = barcode_status ? '/images/icons/valid.png' : '/images/icons/invalid.png';
                        var barcode_status_title = barcode_status ? 'Valid' : 'Invalid';
                        $.ajax({
                            type: "POST",
                            data: form.serialize(),
                            success: function (msg) {
                                var showMessage;
                                if (msg == 'success') {
                                    form.find("input:text").val("");
                                    form.find("textarea").val("");
                                    $("#validBarcode").attr("checked", true);
                                    var newTableRow0 = $("#hidden_placeholder").clone().insertAfter($("#hidden_placeholder")).show().removeAttr('id');
                                    var newTableRow = newTableRow0;

                                    newTableRow.find("form.data_form").find("input:hidden[name=value]").val(value);
                                    newTableRow.find("img.dataicon").attr({
                                        alt: barcode_status_title,
                                        title: barcode_status_title,
                                        src: barcode_status_image
                                    }).
                                    next().html($('<span>').text(value).html());

                                    barcode_response.replace(/\n/g, "<br/>");

                                    newTableRow.find("h2 > input:hidden[name=value]").val(value).
                                    next().val(barcode_status ? "1" : "0").
                                    next().val(barcode_response).
                                    next().find("li:eq(1) > a").empty().append(barcode_response ? $('<span>').text(barcode_response).html() : 'Add a Response');

                                    if ($("#emptyDatabasePlaceholder").length) {
                                        $("#emptyDatabasePlaceholder").remove();
                                    }

                                    showMessage = 'Barcode value has been added.';
                                    messengerDiv.removeClass().addClass("success");
                                } else {
                                    if (msg == 'nosuccess') {
                                        showMessage = 'This barcode value already exists thus cannot be added.';
                                    } else if (msg == 'empty') {
                                        showMessage = 'Barcode cannot be empty.';
                                    }
                                    messengerDiv.removeClass().addClass("warning");
                                }
                                if (messengerDiv.is(":empty")) {
                                    messengerDiv.empty().append("<p></p>").append("<li>" + showMessage + "</li>").hide().slideDown();
                                } else {
                                    messengerDiv.hide().empty().append("<p></p>").append("<li>" + showMessage + "</li>").fadeIn();
                                }
                                $("#LoadingDiv").hide();
                                submitbutton.fadeIn("fast");

                            }
                        });
                        form.find("input:text[name=value]").focus();
                        return false;
                    });

                    $("a.editDatabaseValue").live("click", function (event) {
                        if ($(this).hasClass('a1')) {
                            var td = $(this).parent().parent().find('h2');
                        } else if (1 || $(this).hasClass('a2')) {
                            var td = $(this).parent().parent().parentsUntil('li.valuerow');
                        }
                        //console.log(td.html());
                        td.data('BeforeEditing', td.html());
                        var barcode_value = td.find("input:hidden[name='value']").val();
                        var barcode_status = td.find("input:hidden[name='status']").val();
                        var barcode_response = td.find("input:hidden[name='response']").val();
                        td.empty().html($("#editBarcodeFormHidden").html());

                        td.find("input#input_invalid").attr('id', 'input_invalid_temp');
                        td.find("label#label_for_input_invalid").attr('for', 'input_invalid_temp');

                        td.find("input:hidden[name='value']").val(barcode_value);
                        if (barcode_status == 0) {
                            td.find("input:checkbox[name='invalidity']").attr('checked', 1);
                        }
                        td.find("textarea[name='response']").val(barcode_response);
                        return false;
                    });

                    $("input.cancel_edit").live("click", function (event) {
                        var td = $(this).parent().parent();
                        td.empty().html(td.data('BeforeEditing'));
                        return false;
                    });

                    $("form.editBarcodeForm").live("submit", function (event) {
                        var td = $(this).parent();
                        var barcode_value = td.find("input:hidden[name='value']").val();
                        var barcode_status = td.find("input:checkbox[name='invalidity']").is(':checked') ? 0 : 1;
                        var barcode_response = td.find("textarea[name='response']").val();
                        barcode_response = $.trim(barcode_response);
                        var barcode_status_image = barcode_status ? '/images/icons/valid.png' : '/images/icons/invalid.png';
                        var barcode_status_title = barcode_status ? 'Valid' : 'Invalid';

                        $.ajax({
                            type: "POST",
                            data: $(this).serialize(),
                            success: function (msg) {
                                td.empty().html(td.data('BeforeEditing'));
                                td.find("input:hidden[name=value]").val(barcode_value).
                                next().val(barcode_status).
                                next().val(barcode_response);

                                td.parent().find('img:first').attr({
                                    alt: barcode_status_title,
                                    title: barcode_status_title,
                                    src: barcode_status_image
                                });
                                td.find('a').empty().append(barcode_response ? $('<span>').text(barcode_response.replace(/\n/g, "<br/>")) : 'Add a Response');
                                var showMessage;
                                if (msg == 'success') {
                                    showMessage = 'Barcode value has been edited.';
                                } else if (msg == 'nosuccess') {
                                    showMessage = 'Barcode value has not been edited.';
                                }
                                messengerDiv.removeClass().addClass("success");

                                if (messengerDiv.is(":empty")) {
                                    messengerDiv.empty().append("<p></p>").append("<li>" + showMessage + "</li>").hide().slideDown();
                                } else {
                                    messengerDiv.hide().empty().append("<p></p>").append("<li>" + showMessage + "</li>").fadeIn();
                                }
                            }
                        });
                        return false;
                    });


                    $("a.deleteDatabaseValue").live("click", function (event) {
                        var tr = $(this).parent().parent();
                        var value = $(this).parent().parent().find("form > input:hidden[name=value]").val();
                        var loading_icon = '<img src="/images/icons/loading-white.gif"/>';
                        $(this).parent().html(loading_icon);
                        $.ajax({
                            type: "POST",
                            data: "action=deletevalue&value=" + encodeURIComponent(value) + "&listid=203845",
                            success: function (msg) {
                                tr.fadeOut().remove();
                                messengerDiv.removeClass().addClass("success");
                                var showMessage = 'Barcode value has been deleted.';
                                if (messengerDiv.is(":empty")) {
                                    messengerDiv.empty().append("<p></p>").append("<li>" + showMessage + "</li>").hide().slideDown();
                                } else {
                                    messengerDiv.hide().empty().append("<p></p>").append("<li>" + showMessage + "</li>").fadeIn();
                                }
                            }
                        });
                        return false;
                    });
                });


            </script>
        </div><!--Content Full -->
</asp:Content>

